import { Component, OnInit } from '@angular/core';
import { HomeService } from '@app/services/home/home.service';
import { CartService } from '@app/services/cart/cart.service';
import { SocketioService } from '@app/services/socketio/socketio.service';
import { storage } from '@app/utils';
import { tableId } from '@app/config';
@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {
  private tableId: string = '';
  private categoryList: any[] = [];
  private goodsCategoryList: any = [];
  private cartNum: number = 0;
  constructor (
    private readonly homeService: HomeService,
    private readonly cartService: CartService, private readonly socketio: SocketioService,
  ) {
    this.tableId = storage.getItem(tableId);
    // 监听购物车数量变化
    this.socketio.socket.on('changeCard', (data: string) => {
      this.initCartNum(this.tableId);
    })
  }

  ngOnInit() {
    this.initCategoryList();
    this.initGoodsCategoryList();
    this.initCartNum(this.tableId);
  }

  ngAfterViewInit(): void {
    this.asideDomInit();
  }
  // 获取分类列表
  private initCategoryList(): void {
    this.homeService.category$().subscribe((data: any) => {
      const { code, message, result } = data;
      if (Object.is(code, 0)) {
        this.categoryList = result;
      } else {
        console.log('请求菜单数据失败');
      }
    }, error => {
      console.log(error);
    })
  }

  // 获取购物车数量
  private initCartNum(tableId: string): void {
    this.cartService.cartNum$(tableId).subscribe(data => {
      const { code, message, result } = data;
      if (Object.is(code, 0)) {
        this.cartNum = result;
      }
    })
  }
  // 获取分类商品
  private initGoodsCategoryList(): void {
    this.homeService.goodsCategoryList$().subscribe(data => {
      const { code, message, result } = data;
      if (Object.is(code, 0)) {
        this.goodsCategoryList = result;
      } else {
        console.log('获取商品数据失败');
      }
    })
  }

  // 点击左侧右侧跳转到指定的楼层并且关闭左侧
  private changeList(key: number) {
    const itemCateDom: any = document.querySelectorAll(".item_cate");
    document.documentElement.scrollTop = itemCateDom[key].offsetTop;
    //分类
    const leftCate = document.getElementById("left_cate");
    //背景
    const bg = document.getElementById("bg");
    leftCate.style.transform = "translate(-100%,0)";
    bg.style.display = "none";
  }

  //  原生js实现点击左侧菜单
  private asideDomInit() {
    //按钮
    var navCate = document.getElementById("nav_cate");
    //分类
    var leftCate = document.getElementById("left_cate");
    //背景
    var bg = document.getElementById("bg");
    var flag = true;
    navCate.onclick = function () {
      if (flag) {
        flag = false;
        leftCate.style.transform = "translate(0,0)";
        bg.style.display = "block";
      } else {
        flag = true;
        leftCate.style.transform = "translate(-100%,0)";
        bg.style.display = "none";
      }
    };
  }
}
